<script setup>
import { ref } from 'vue';
//import { PieChartOutlined, MailOutlined } from '@ant-design/icons-vue';

const list = [{
  key: '0',
  title: '首页',
  path: '/',
  icon: "HomeOutlined"
}, {
  key: '1',
  title: '关于',
  path: '/about',
  icon: "AppstoreOutlined"
}, {
  key: '2',
  title: '系统',
  path: '/page2',
  icon: "DingtalkOutlined",
  subs: [
	  {
	    key: '3',
	    title: '用户管理',
	    path: '/page3',
		icon: "PieChartOutlined"
	  }, {
	    key: '4',
	    title: '权限管理',
	    path: '/page4',
		icon: "PieChartOutlined"
	  }, 
  ]
}, {
  key: '5',
  title: '测试页面',
  path: '/testview',
  icon: "DingtalkOutlined"
}, {
  key: '6',
  title: '页面6',
  path: '/page6',
  icon: "DingtalkOutlined"
}, {
  key: '7',
  title: '页面7',
  path: '/page7',
  icon: "DingtalkOutlined"
}, {
  key: '8',
  title: '页面8',
  path: '/page8',
  icon: "DingtalkOutlined"
}]; //菜单项对应路由及相关vue文件请自行增加

const selectedKeys = ref([]);//处于选中状态的节点key列表
const openKeys = ref([]);//处于展开状态的节点key列表
const emit = defineEmits(["addTabByMenu"]);
function selectedMenuNode(nodeInfo) {
  for (let index = 0;index < list.length;index++) {
    if (list[index].key == nodeInfo.key) {
      emit('addTabByMenu', list[index]); //调用父组件，添加页签
      break;
    }else{
		if(list[index].subs){
			for (let sindex = 0;sindex < list[index].subs.length;sindex++) {
				if (list[index].subs[sindex].key == nodeInfo.key) {
				  emit('addTabByMenu', list[index].subs[sindex]); //调用父组件，添加页签
				  break;
				}
			}
		}
	}
  }
}

</script>
<template>
    <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="light" @select="selectedMenuNode">
      <template v-for="item in list" :key="item.key">
        <template v-if="!item.subs">
          <a-menu-item :key="item.key">
            <component :is="$antIcons[item.icon]" />
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
			<a-sub-menu :key="item.key">
				<template #icon>
					<component :is="$antIcons[item.icon]" />
				</template>				
				<template #title>{{ item.title }}</template>
				
				<a-menu-item v-for="subitem in item.subs" :key="subitem.key">
					<component :is="$antIcons[subitem.icon]" />
					{{ subitem.title }}			
				</a-menu-item>
			</a-sub-menu>
        </template>
      </template>
    </a-menu>
</template>
<style scoped>

</style>